<template>
  <div class="address-box">
    <nav-bar>
      <template v-slot:default>地址管理</template>
    </nav-bar>

    <div v-if="list.length===0" style="margin-top:200px;text-align: center;">
      您的收货地址空空如也，快去添加吧...!
    </div>
    <div class="address-item">
      <van-address-list
          v-model="chosenAddressId"
          :list="list"
          default-tag-text="默认地址"
          @add="onAdd"
          @edit="onEdit"
      />
    </div>
  </div>
</template>

<script>
import {defineComponent, onMounted, reactive, ref, toRefs} from 'vue'
import {getAddressList, getCity} from "../../../network/address";
import NavBar from "../../../components/common/navbar/NavBar";
import {useRouter} from "vue-router";
import {Toast} from "vant";

export default defineComponent({
  name: "AddressList",
  components: {
    NavBar
  },
  setup() {
    const router = useRouter()
    const entityData = reactive({
      chosenAddressId: '1',
      list: [],
    })
    onMounted(() => {
      Toast('数据加载中...')
      getAddressList().then(res => {
        entityData.list = res.data.map(item => {
          if (item.is_default === 1) {
            entityData.chosenAddressId = item.id
          }
          return {
            id: item.id,// 收获地址id
            name: item.name,	//收货人姓名	string
            tel: item.phone,	//收货人手机号	number | string
            address: `${item.province}${item.city}${item.county} ${item.address}`,//	收货地址	string
            isDefault: !!item.is_default	//是否为默认地址	boolean
          }
        })
        Toast.clear()
      })

    })
    // 添加地址
    const onAdd = () => {
      router.push({path: '/addressedit',query:{type:'add'}})
    }
    // 修改地址
    const onEdit = (item) => {
      router.push({path:'addressedit',query:{type:'edit',addressId:item.id}})
    }
    return {
      onAdd,
      onEdit,
      ...toRefs(entityData)
    }
  }
})
</script>

<style lang="scss">
.address-box {
  height: 300px;

  .van-radio__icon {
    display: none;
  }

  .address-item {
    margin-top: 45px;

    .van-button {
      background: var(--color-tint);
      border-color: var(--color-tint);
    }
  }
}

.van-address-list__bottom {
  bottom: 100px !important;
}
</style>